.page {
  position: relative;
  width: 100%;

  /* 顶部导航栏区域 start */
  .navbar {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0rpx 30rpx;
    display: flex;
    align-items: center;

    /* logo */
    &__logo {
      flex-grow: 0;
      flex-shrink: 0;
      width: 56rpx;
      height: 56rpx;
      border-radius: 50%;
      background-color: var(--tn-color-gray-light);

      .image {
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }
    }

    /* 搜索框 start */
    .search-box {
      flex: 1;
      height: 64rpx;
      max-height: 100%;
      border-radius: 50rpx 50rpx 0rpx 50rpx;
      display: flex;
      align-items: center;
      padding: 0rpx 30rpx;
      line-height: 1;
      background-color: rgba(0, 0, 0, 0.06);
      color: rgba(0, 0, 0, 0.45);

      &__icon {
        font-size: 32rpx;
      }

      &__tips {
        font-size: 24rpx;
        margin-left: 16rpx;
      }
    }

    /* 搜索框 end */
  }

  /* 顶部导航栏区域 end */

  /* 顶部轮播图 start */
  .top-swiper {
    position: relative;
    width: 100%;
    height: 480rpx;

    .swiper-item {
      position: relative;
      width: 100%;
      height: 100%;
    }
  }

  /* 顶部轮播图 end */
  /* 公告通知 start */
  .notice-container {
    padding: 15rpx 30rpx;

    .notice-info {
      display: flex;
      align-items: center;
      width: 100%;

      .icon {
        width: 60rpx;
        height: 56rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  /* 公告通知 end */


  .nav-title {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 30rpx 30rpx;

    .left {
      flex: 1;
      align-items: center;
    }

    .right {
      flex-grow: 0;
      flex-shrink: 0;
      font-size: 26rpx;
      color: var(--tn-color-gray-dark);
    }
  }

  .sub-page-container {
    margin-top: 30rpx;
    position: relative;
    width: 100%;

    /* 分类 start */
    .category-container {
      position: relative;
      width: fit-content;
      flex-wrap: nowrap;
      // width: 100%;
      // margin-top: 40rpx;
      display: flex;
      justify-content: space-between;

      .category-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 26rpx 30rpx;
        flex-grow: 1;
        flex-shrink: 0;

        .item-icon {
          width: 80rpx;
          height: 80rpx;
          border-radius: 15rpx;
          background-size: cover;
          background-repeat:no-repeat;
        }

        .item-name {
          margin-top: 16rpx;
          font-size: 26rpx;
          // color: var(--tn-color-gray-dark);
        }
      }
    }

    /* 分类 end */

    /* 最新资讯 start */
    .newest {
      margin-top: 30rpx;

      .newest-list {
        // margin-top: 30rpx;
        padding: 0 30rpx;

        .list-item {
          border-radius: 8rpx;

          .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 26rpx;

            .list-info {
              display: flex;
              align-items: center;
              width: 80%;

              .icon {
                width: 60rpx;
                height: 26rpx;
                color: #ffa929;
                font-size: 78rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 12rpx;
              }
            }

            .list-operation {
              width: 19%;
              text-align: right;
              font-size: 22rpx;
              color: var(--tn-color-gray);
            }
          }
        }
      }
    }

    /* 最新资讯 end */

    /* 发现好友 start */
    .find-friends {
      margin-top: 30rpx;

      .ff-title {
        padding: 0 30rpx;
      }

      .content-wrapper {
        padding: 0 30rpx;
        margin-top: 40rpx;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        // transform: skewX(-1deg); /* 倾斜角度 */
        .content-item {
          position: relative;
          width: calc(100% / 3 - 15rpx);
          margin-bottom: 30rpx;
          border-radius: 18rpx;
          padding: 24rpx 10rpx 24rpx 24rpx;
          display: flex;
          justify-content: space-between;
          line-height: 1;
          z-index: 2;

          &::after {
            z-index: 1;
          }

          .left {
            z-index: 2;

            .title {
              font-size: 32rpx;
              color: #fff;
            }

            .show-more {
              margin-top: 32rpx;
              font-size: 24rpx;
              color: rgba(255, 255, 255, 0.8);

              text {
                margin-right: 4rpx;
              }
            }
          }

          .icon {
            z-index: 2;
            font-size: 70rpx;
            margin-top: -16rpx;
            color: #fff;
            opacity: 0.8;
          }
        }
      }
    }
     /* 发现好友 end */
  }

  .tabs-sticky {
    position: relative;

    .tabs {
      margin-top: 15rpx;
    }

    .custom-bar {
      line-height: 1;
      font-size: 50rpx;
      color: var(--tn-color-primary);
      position: relative;
      bottom: -18rpx;

      /* #ifdef H5 */
      left: -25rpx;
      /* #endif*/

      /* #ifdef MP*/
      left: 0rpx;
      /* #endif */
    }
  }

  /* 推荐动态 start */
  .dynamic-list {
    margin-top: 30rpx;
    padding-bottom: 100rpx;

    .rd-title {
      padding: 0 30rpx;
    }
  }
  /* 推荐动态 end */
}